<template>
    <div>
        <a-modal
         v-model:visible="visible" 
         :dialog-style="{ top: '20px' }"
         :title="formState.id?formState.view?'查看品种生产记录':'编辑品种生产记录':'新增品种生产记录'" 
         @ok="handleOk" 
         @cancel="visible = false"
         class="production-records-add-edit-modal"
         :width="1000"
         :footer="null"
        >
            <div v-if="visible" style="height: calc(100vh - 120px);overflow-y: auto;">
                <div class="material-warning-tabs">
                    <!-- @change="activeKeyChange" -->
                    <a-tabs v-model:activeKey="activeKey" type="card" >
                        <a-tab-pane key="生产信息" tab="生产信息"></a-tab-pane>
                        <a-tab-pane key="使用物料" tab="使用物料"></a-tab-pane>
                        <a-tab-pane key="使用车间" tab="使用车间"></a-tab-pane>
                        <a-tab-pane key="检验信息" tab="检验信息"></a-tab-pane>
                    </a-tabs>
                </div>
                <div v-show="activeKey == '生产信息'">
                    <a-form :form="form" layout="horizontal" class="production-view">
                        
                        <a-form-item label="产品名称">
                            <span>{{currentData.fspm}}</span>
                        </a-form-item>
                        <a-form-item label="通用名称">
                            <span>{{currentData.ftymc}}</span>
                        </a-form-item>
                        <a-form-item label="批准文号">
                            <span>{{currentData.fpzwh}}</span>
                        </a-form-item>
                        <a-form-item label="药品分类">
                            <span>{{currentData.fcplb}}</span>
                        </a-form-item>
                        <a-form-item label="产品规格" >
                            <span>{{currentData.fgg}}</span>
                        </a-form-item>
                    </a-form>
                    <a-form :form="form" layout="horizontal" class="production-view">
                        <a-form-item label="产品批号">
                            <span v-if="formState.view">{{ formState.fcpph }}</span>
                            <a-input
                            v-else
                            v-model:value="formState.fcpph"
                            placeholder="请输入产品批号"
                            v-decorator="[
                                'fcpph', { initialValue:formState.fcpph, rules: rules.fcpph}
                            ]"/>
                        </a-form-item>
                        <a-form-item label="批量">
                            <span v-if="formState.view">{{ formState.fpl }}</span>
                            <a-input
                            v-else
                            v-model:value="formState.fpl"
                            placeholder="请输入批量"
                            v-decorator="[
                                'fpl', { initialValue:formState.fpl, rules: rules.fpl}
                            ]"/>
                        </a-form-item>
                        <a-form-item label="包装规格">
                            <span v-if="formState.view">{{ formState.fbzgg }}</span>
                            <a-input
                            v-else
                            v-model:value="formState.fbzgg"
                            placeholder="请输入包装规格"
                            v-decorator="[
                                'fbzgg', { initialValue:formState.fbzgg, rules: rules.fbzgg}
                            ]"/>
                        </a-form-item>
                        
                        <a-form-item label="生产日期">
                            <span v-if="formState.view">{{ moment(formState.fscrq).format('YYYY-MM-DD HH:mm:ss') }}</span>
                            <a-date-picker
                            v-else
                            show-time
                            v-model:value="formState.fscrq"
                            placeholder="请选择生产日期"
                            v-decorator="[
                                'fscrq', { initialValue:formState.fscrq, rules: rules.fscrq}
                            ]"/>
                        </a-form-item>
                        <a-form-item label="生产说明" class="flex-1-box">
                            <span v-if="formState.view">{{ formState.fscsm }}</span>
                            <a-textarea 
                            v-else
                                placeholder="请输入生产说明"
                                v-model:value="formState.fscsm"
                                v-decorator="[
                                    'fscsm', { initialValue:formState.fscsm, rules: rules.fscsm}
                                ]"
                                :autosize="{ minRows: 3, maxRows: 10000 }"
                            ></a-textarea>
                        </a-form-item>
                    </a-form>
                    <!-- <a-divider>产品信息</a-divider> -->
                    
                </div>
                <div v-show="activeKey == '使用物料'">
                    <commpVxeTable
                        :key="productionRefreshTable"
                        ref="headmanVxeTable"
                        :config="{
                            api:assessCheckApi.spcyQyInfoqueryScjlWlList,
                            rowId: 'id',
                            paramet:{
                                fscjlid:formState.id,
                            },
                            autoHidden:true,
                        }" 
                        :isCanWrap="true"
                        :columns="productionColumnsVxe" 
                        :formItem="[]"
                        :occupancyHeight="60"
                        
                    >  
                        <template v-slot:externalOperations="{data}" v-if="!formState.view">
                            <vxe-form-item>
                                <template>
                                    <a-button class="blue-btn" type="primary" @click="productionAddClick(1)">新增</a-button>
                                </template>
                            </vxe-form-item>
                        </template>
                        <!-- usageQuantity -->
                        <template v-slot:fwlsysl_name="{row}">
                            <a-input-number
                                v-if="!formState.view"
                                style="width: 80px;"
                                class="fwlsysl-input-number"
                                :min="1"
                                :precision="0"
                                @blur="usageQuantity(row)"
                                v-model:value="row.fwlsysl"
                                placeholder="请输入使用量"
                            />
                            <span v-else>{{ row.fwlsysl }}</span>
                        </template>
                        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                            <a-form layout="inline" class="search-form" >
                                <a-form-item v-if="!formState.view">
                                    <a-button class="red-btn" type="primary" @click="productionDeleteClick(row,0)" >删除</a-button>
                                </a-form-item>
                            </a-form> 
                        </template>
                    </commpVxeTable>
                </div>
                <div v-show="activeKey == '使用车间'">
                    <commpVxeTable
                        :key="workshopfreshTable"
                        ref="headmanVxeTable"
                        :config="{
                            api:assessCheckApi.spcyQyInfoquerySccjSyjlList,
                            rowId: 'id',
                            paramet:{
                                fscjlid:formState.id,
                            },
                            autoHidden:true,
                        }" 
                        :isCanWrap="true"
                        :columns="workshopColumnsVxe" 
                        :formItem="[]"
                        :occupancyHeight="60"
                        
                    >  
                        <template v-slot:externalOperations="{data}" v-if="!formState.view">
                            <vxe-form-item>
                                <template>
                                    <a-button class="blue-btn" type="primary" @click="workshopAddClick(1)">新增</a-button>
                                </template>
                            </vxe-form-item>
                        </template>
                        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                            <a-form layout="inline" class="search-form" >
                                <a-form-item v-if="!formState.view">
                                    <a-button class="blue-btn" type="primary" @click="workshopEditClick(row,0)" >编辑</a-button>
                                </a-form-item>
                                <a-form-item v-if="formState.view">
                                    <a-button class="blue-btn" type="primary" @click="workshopEditClick(row,0,true)" >查看</a-button>
                                </a-form-item>
                                <a-form-item v-if="!formState.view">
                                    <a-button class="red-btn" type="primary" @click="workshopDeleteClick(row,0)" >删除</a-button>
                                </a-form-item>
                            </a-form> 
                        </template>
                    </commpVxeTable>
                </div>
                <div v-show="activeKey == '检验信息'">
                    <commpVxeTable
                    :key="refreshTable"
                    ref="headmanVxeTable"
                    :config="{
                        api:assessCheckApi.spcyQyInfoqueryQyJyxxList,
                        rowId: 'id',
                        paramet:{
                            fscjlid:formState.id,
                        }
                    }" 
                    :columns="inspectColumnsVxe" 
                    :formItem="[]"
                    :occupancyHeight="60"
                > 
                    <template v-slot:externalOperations="{data}" v-if="!formState.view">
                        <vxe-form-item>
                            <template>
                                <a-button class="blue-btn" type="primary" @click="currentaddClick(0)">新增</a-button>
                            </template>
                        </vxe-form-item>
                    </template>
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item v-if="!formState.view">
                                <a-button class="blue-btn" type="primary" @click="currenteditClick(row,0)" >编辑</a-button>
                            </a-form-item>
                            <a-form-item v-else>
                                <a-button class="blue-btn" type="primary" @click="currenteditClick(row,0,'查看')" >查看</a-button>
                            </a-form-item>
                            <a-form-item v-if="!formState.view">
                                <a-button class="red-btn" type="primary" @click="currentdeleteClick(row,0)" >删除</a-button>
                            </a-form-item>
                        </a-form> 
                    </template>
                </commpVxeTable>
                </div>
                
            
                <div v-show="activeKey == '生产信息'" style="
                    display: flex; justify-content: flex-end;
                    margin-top: 20px; width: 100%;
                    padding-right: 10px;position: absolute;bottom: 10px;right: 10px;">
                    <a-button @click="visible = false">取消</a-button>
                    <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                    <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
                </div>
            </div>
            <selectMaterial ref="selectMaterialRef" @productionSuccess="productionSuccess" />
            <workshopAddEdit ref="workshopcurrentAddEditRef" @workshopSuccess="workshopSuccess" />
            <inspectAddEdit ref="currentAddEditRef0" @currentaddItem="currentaddItem" @currenteditItem="currenteditItem" />
        </a-modal>
    </div>
</template>
<script>

import compSelector from '@/components/compSelector/compSelector.vue'
import { 
    ocalityPostAction,
    spcyQyInfodeleteScjlwl,
    spcyQyInfomodifyScjlWl,
    spcyQyInfodeleteScjlSycj,
    spcyQyInfoupdateJyxx,
    spcyQyInfodeleteJyxx,
    spcyQyInfoaddJyxx,
} from '../service/index'
import assessCheckApi from '../service/api'
import moment from 'moment'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import selectMaterial from './selectMaterial.vue'
import workshopAddEdit from './workshopAddEdit.vue'
import inspectAddEdit from './inspectAddEdit.vue'
export default {
    components:{
        compSelector,
        commpVxeTable,
        selectMaterial,
        workshopAddEdit,
        inspectAddEdit,
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            refreshTable:null,
            assessCheckApi:assessCheckApi,
            activeKey:'生产信息',
            visible:false,
            formState:{},
            currentData:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fcpph: [{
                    required: true,
                    message: '请输入产品批号',
                    trigger: 'blur',
                }],
                fpl: [{
                    required: true,
                    message: '请输入批量',
                    trigger: 'blur',
                }],
                fbzgg: [{
                    required: true,
                    message: '请输入包装规格',
                    trigger: 'blur',
                }],
                fscrq: [{
                    type:'object',
                    required: true,
                    message: '请选择生产日期',
                    trigger: 'blur',
                }],
                fscsm: [{
                    required: true,
                    message: '请输入生产说明',
                    trigger: 'blur',
                }],
            },
            materialUnitList:[],
            productionRefreshTable:null,
            productionColumnsVxe:[{
                title: '物料名称',
                field: 'fwlmc',
            },{
                title: '规格',
                field: 'fgg',
            },{
                title: '数量单位',
                field: 'fsldw',
            },{
                title: '库存数量',
                field: 'fkcsl',
            },{
                title: '物料使用数量',
                field: 'fwlsysl',
                slots: {
                    default: 'fwlsysl_name'
                }
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:80,
                fixed:'right'
            }],
            workshopfreshTable:null,
            workshopColumnsVxe:[{
                title: '工序环节名称',
                field: 'fgxhjmc',
            },{
                title: '使用开始时间',
                field: 'fsykssj',
            },{
                title: '使用结束时间',
                field: 'fsyjssj',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:180,
                fixed:'right'
            }],
            methodList:[{
                name:'检验信息',
                editName:spcyQyInfoupdateJyxx,
                deleteName:spcyQyInfodeleteJyxx,
                addName:spcyQyInfoaddJyxx,
            }],
            inspectColumnsVxe:[
            // { 
            //     type: 'checkbox', 
            //     width: 60 ,
            //     fixed: 'left'
            // },
            {
                title: '报告编号', //列头显示文字
                field: 'fbgbh',
            },{
                title: '送检部门', //列头显示文字
                field: 'fsjbm',
            },{
                title: '送检日期', //列头显示文字
                field: 'fsjrq',
            },{
                title: '报告日期', //列头显示文字
                field: 'fbgrq',
            },{
                title: '检验结论', //列头显示文字
                field: 'fjyjl',
            },{
                title: '有效期', //列头显示文字
                field: 'fyxq',
            },{
                    title: '操作',
                    field: 'id',
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                    width:180,
                    fixed:'right'
            }],
            
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val,row){
            //console.log(val,row)
            this.formState = {}
            this.currentData = {}
            this.currentData = val
            this.formState = {fpzid:val.fpzid,...row}
            this.formState.fscrq = row.fscrq?moment(row.fscrq):''
            this.activeKey = '生产信息'
            //console.log('是否再次获取',val)
            ocalityPostAction({dictName:'企业物料单位'}).then(res => {
                if(res.code == 200){
                    this.materialUnitList = res.result
                }
            })
        },
        productionSuccess(){
            this.productionRefreshTable = Date.now()
        },
        //使用物料
        productionAddClick(){
            if(this.formState.id){
                this.$refs.selectMaterialRef.getData({fqyid:this.currentData.fqyid,fpzid:this.currentData.fpzid,fscjlid:this.formState.id})
                this.$refs.selectMaterialRef.visible = true
            }else{
                this.$message.warning('请先保存生产信息')
                this.activeKey = '生产信息'
            }
            
        },
        productionDeleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcyQyInfodeleteScjlwl({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.productionRefreshTable = Date.now()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        usageQuantity(item){
            if(!item.fwlsysl){
                this.$message.warning('使用数量不能为空')
                this.productionRefreshTable = Date.now()
            }else{
                spcyQyInfomodifyScjlWl({id:item.id,fwlsysl:item.fwlsysl}).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.productionRefreshTable = Date.now()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            
        },
        //生产车间
        workshopAddClick(){
            if(this.formState.id){
                this.$refs.workshopcurrentAddEditRef.getData({fqyid:this.currentData.fqyid,fpzid:this.currentData.fpzid,fscjlid:this.formState.id},{})
                this.$refs.workshopcurrentAddEditRef.visible = true
            }else{
                this.$message.warning('请先保存生产信息')
                this.activeKey = '生产信息'
            }
        },
        workshopEditClick(row,index,view){
            this.$refs.workshopcurrentAddEditRef.getData({fqyid:this.currentData.fqyid,fpzid:this.currentData.fpzid,fscjlid:this.formState.id,view:view?true:false},{...row,view:view?true:false})
            this.$refs.workshopcurrentAddEditRef.visible = true
        },
        workshopDeleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcyQyInfodeleteScjlSycj({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.workshopfreshTable = Date.now()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        workshopSuccess(){
            this.workshopfreshTable = Date.now()
        },
        //检验
        currentaddClick(index){
            if(this.formState.id){
                let refName = 'currentAddEditRef'+index
                this.$refs[refName].getData({fqyid:this.currentData.fqyid,fpzid:this.currentData.fpzid,fscjlid:this.formState.id,index:index})
                this.$refs[refName].visible = true
            }else{
                this.$message.warning('请先保存生产信息')
                this.activeKey = '生产信息'
            }
            
        },
        currenteditClick(val,index,view){
            //console.log(val)
            let refName = 'currentAddEditRef'+index
            this.$refs[refName].getData({fqyid:this.currentData.fqyid,fpzid:this.currentData.fpzid,fscjlid:this.formState.id,...val,index:index,view:view?true:false})
            this.$refs[refName].visible = true
        },
        currentaddItem(val,vis,isTip){
            //console.log('新增',val)
            let refName = 'currentAddEditRef'+val.index
            this.methodList[val.index].addName(val).then(res=>{
                if(res.code == 200){
                    this.refreshTable = Date.now()
                    if(!isTip){
                        this.$message.success(res.message)
                    }
                    
                    this.$refs[refName].getData({fqyid:this.currentData.fqyid,fpzid:this.currentData.fpzid,fscjlid:this.formState.id,...res.result,index:val.index})
                    this.$refs[refName].visible = vis
                    //console.log(res)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        currenteditItem(val,vis){
            //console.log('编辑',val)
            let refName = 'currentAddEditRef'+val.index
            this.methodList[val.index].editName(val).then(res=>{
                if(res.code == 200){
                    this.refreshTable = Date.now()
                    this.$message.success(res.message)
                    this.$refs[refName].visible = vis
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        currentdeleteClick(val,index){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    that.methodList[index].deleteName({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.refreshTable = Date.now()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        //
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{...this.formState,...values,fscrq:moment(this.formState.fscrq).format('YYYY-MM-DD HH:mm:ss')},val)
                    }else{
                        this.$emit('addItem',{...this.formState,...values,fscrq:moment(this.formState.fscrq).format('YYYY-MM-DD HH:mm:ss')},val)
                    }
                    
                }
            })
        },
    }
}
</script>
<style lang="less">
.production-records-add-edit-modal{
    .production-view{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
            margin-bottom: 5px;
        }
        .ant-form-item-label{
            width: 85px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        
    }
    .production-view{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
            margin-bottom: 5px;
        }
        .ant-form-item-label{
            width: 85px;
        }
        .ant-form-item-control-wrapper{
            width: 230px;
        }
    }
    .ant-modal-body{
        padding: 10px;
    }
    .material-warning-tabs{
        .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
            padding-right: 30px;
            margin-right: 10px !important;
        }
        .ant-tabs-tab{
            border-radius: 10px 10px 0 0 !important;
        }
        .ant-tabs-nav-container{
            padding-left: 10px;
            height: 50px !important;
        }
        .ant-tabs-nav-scroll{
            padding-top: 10px;
        }
        .ant-tabs-tab-active{
            background-color: #5ca3e5 !important;
            color: #fff !important;
            border-color: #5ca3e5 !important;
            box-shadow: 0px 0px 12px 0px #5ca3e5;
        }
    }
    .fwlsysl-input-number{
        .ant-input-number-input{
            text-align: center !important;
        }
    }
}
</style>